<template>
	<view class="mpvueGestureLock" :class="APPTheme">
        <view class="mpvue-gesture-lock">
            <mpvue-gesture-lock :containerWidth="590" :cycleRadius="70" @end="onEnd" :password="password"></mpvue-gesture-lock>
        </view>
        <view class="uni-text">{{text}}</view>
	</view>
</template>

<script>
    import mpvueGestureLock from '@/components/mpvueGestureLock';
	let that
	import {
		mapGetters,
		mapActions
	} from 'vuex'
    export default {
        components: {
            mpvueGestureLock
        },
		computed: {
			...mapGetters(['APPTheme','userInfo','api']),
		},
        data() {
            return {
				type:0,//0为设置，1为修改
				title : "手势图案",
                password: [],
                text: '请设定手势',
				num:0,
				option:'',//带过来的参数(哪个页面过来的)
				Switch:null,//想设置开启还是关闭
            }
        },
		onLoad(e) {
			that=this
			that.option=e.page
			console.log(that.option);
			if(that.option=='Im_setUp'){//从聊天设置里来的
				that.Switch=e.Switch
				that.text='请输入量子手势密码'
			}
			//获取手势密码
			that.getUserSign()
		},
        methods: {
			//获取手势
			getUserSign(){
				that.GLOBAL.doGet(that.api.GLOBAL_rest_sys_user_getUserSign,{}).then(res=>{
					if(res.code=='0'&&res.data){//设置过手势
						that.password=JSON.parse(res.data)
						console.log(that.option);
						if(that.option=='Im_setUp'){//从聊天设置里来的
							that.text='请输入量子手势密码'
						}else{
							that.text='手势已存在，如需修改请先输入之前手势'
							that.type=1//修改手势
						}
						
						
					}
				})
			},
            onEnd(data) {
				if(that.option=='Im_setUp'){
					//从聊天设置里来的
					that.ImSetUp(data)
				}else{
					//从首页设置过来的
					that.indexSetUp(data)
				}
            },
			//从聊天设置里来的
			ImSetUp(data){
				if(that.num==0&&this.password.join('') != data.join('')){
					this.text="手势密码匹配不正确"
					
				}else{
					this.text="手势密码匹配正确"
					uni.$emit('page_mpvue-gesture-lock',that.Switch)
					uni.navigateBack({
						delta: 1
					});
				}
				
			},
			//从首页设置过来的
			indexSetUp(data){
				if(that.type==0){//设置手势
					if(data.length<4){
						this.text="手势不能少于4位"
						return
					}
					if(that.num==1){
						if (this.password.join('') === data.join('')) {
						    
							//设置手势密码
							that.setUserSign()
						} else {
						    this.text = '两次手势设定不一致'
							this.password=[]
							this.num=0
						}
					}else{
						this.text="再次确认手势"
						that.num=1
					}
					this.password=data
				}else{//修改手势
					if(that.num==0&&this.password.join('') != data.join('')){
						this.text="手势密码不正确"
						return
					}
					if(data.length<4){
						this.text="手势不能少于4位"
						return
					}
					console.log(data,that.num);
					if(that.num==2){
						if (this.password.join('') === data.join('')) {
							//设置手势密码
							that.setUserSign()
						} else {
						    this.text = '两次手势设定不一致'
							this.password=[]
							this.num=0
						}
					}
					if(that.num==1){
						this.text="再次确认手势"
						that.num=2
						
					}
					if(that.num==0){
						this.text="请输入新手势"
						that.num=1
					}
					this.password=data
				}
			},
			//设置手势密码
			setUserSign(){
				let req={
					sign:JSON.stringify(this.password)
				}
				that.GLOBAL.doGet(that.api.GLOBAL_rest_sys_user_setUserSign,req).then(res=>{
					if(res.code=='0'&&res.data){//设置过手势
						that.text = '手势设定完成'
						that.password=[]
						that.num=0
						uni.navigateBack({
							delta: 1
						});
					}
				})
			}
        }
    }
</script>

<style scoped lang="scss">
	.mpvueGestureLock{
		height: 100%;
		.mpvue-gesture-lock{
			padding-top: 40%;
		}
		.uni-text{
		    font-size: 30upx;
		    text-align: center;
		    margin-top: 30upx;
		}
	}
    
</style>
